/*
* @Author: yyf
* @Create: 2018/5/10
* @description: 企业库弹框
*/
<template>
    <div>
        <el-dialog :visible="companyDetailDialog" :title="title" append-to-body :before-close="closeCompanyDialog">
            <el-form ref="companyDetail" :model="companySearch" :companyRules="companyRules">
                <el-row>
                    <el-col :span="13">
                        <el-form-item label="名称搜索" label-width="90px" prop="name">
                            <el-input v-model="companySearch.name" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label-width="10px">
                            <el-select v-model="companySearch.searchType" class="w-100">
                                <el-option 
                                    v-for="item in openSearchNameType" 
                                    :key="item.dictValue" 
                                    :value="item.dictValue" 
                                    :label="item.dictName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label-width="10px">
                            <el-button type="primary" @click="getCompanyDetail">搜索</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <CompanyInfoTable :mainCompanySearch="mainCompanySearch"
                            ref="companyInfoTable"
                            @getName="getName">
            </CompanyInfoTable>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="closeCompanyDialog">完 成</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop, Watch } from 'vue-property-decorator';
import { CompanySearch } from '../../service/common/interface';
import CompanyInfoTable from '../companyTable/index.vue';
interface MainCompanySearch {
    name: string;
    searchType: string;
    attribute: number;
}
@Component({
    components: {
        CompanyInfoTable, // 企业信息
    }
})
export default class CompanyInfoDialog extends Vue {
    @Prop({default: false})
    public companyDetailDialog: boolean; // 企业库弹框是否显示
    @Prop({default: 1})
    public attribute: number; // 对应字典companyIdentity
    @Prop({default: '企业库'})
    public title: string; // dialog标题

    public openSearchNameType = this.$store.state.user.dictionary.dicList.openSearchNameType; // 企业搜索类型
    public companySearch: CompanySearch = { searchType: 'full_name' } as CompanySearch; // 根据条件搜索企业
    public mainCompanySearch: MainCompanySearch = { searchType: 'full_name' } as MainCompanySearch;
    public pageSize: number = 0; // 页数
    public pageIndex: number = 1; // 当前页码
    public totalCount: number = 0; // 总页数

    public companyRules = {
        name: [
            { required: true, message: '请输入搜索名称', trigger:  'blur' }
        ],
    };

    // refs
    public $refs: {
        companyDetail: HTMLFormElement;
        companyInfoTable: HTMLFormElement;
    };

    @Watch('companyDetailDialog')
    public onChildChanged(val: boolean, oldVal: boolean) {
        if (val === true) {
            this.companySearch.name = '';
        }
    }

    // 声明周期钩子
    // public mounted() {
    //     console.log(this.$store.state.user.dictionary, '字典');
    // }

    // 查询企业名称
    public async getCompanyDetail() {
        this.$set(this.mainCompanySearch, 'name', this.companySearch.name);
        this.$set(this.mainCompanySearch, 'searchType', this.companySearch.searchType);
        this.$set(this.mainCompanySearch, 'attribute', this.attribute);
        this.$refs.companyInfoTable.getCompanyOpenSearchData();
    }
    public getName(company: {id: number, name: string}) {
        this.companySearch.name = company.name;
        this.closeCompanyDialog();
        this.$emit('getName', {id: company.id, name: company.name});
    }
    // 关闭企业库
    public closeCompanyDialog() {
        this.$emit('closeCompanyDialog');
    }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

</style>
